<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="bean.User"%>
<%@ page import="bean.Right"%>
<%@ page import="java.util.List"%>
<%@ page import="bean.model.PageModel"%>
<%
	User user = (User) request.getSession().getAttribute("user");
	List<Right> type1 = (List) request.getSession().getAttribute("type1");
	List<Right> type2 = (List) request.getSession().getAttribute("type2");
	List<Right> type3 = (List) request.getSession().getAttribute("type3");
	List<Right> type4 = (List) request.getSession().getAttribute("type4");
	List<User> queryStaffByPage = (List) request.getSession().getAttribute("rss");
	PageModel pageModel = (PageModel) request.getSession().getAttribute("rolePageModel");
%>
<!DOCTYPE html>
<head>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no">
<meta charset="UTF-8">

<meta name="description" content="Violate Responsive Admin Template">
<meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

<title>车辆缉查管理系统-角色管理查询</title>

<!-- CSS -->
<link href="zhu/css/bootstrap.min.css" rel="stylesheet">
<link href="zhu/css/animate.min.css" rel="stylesheet">
<link href="zhu/css/font-awesome.min.css" rel="stylesheet">
<link href="zhu/css/form.css" rel="stylesheet">
<link href="zhu/css/calendar.css" rel="stylesheet">
<link href="zhu/css/style.css" rel="stylesheet">
<link href="zhu/css/icons.css" rel="stylesheet">
<link href="zhu/css/generics.css" rel="stylesheet">
<!-- 我自己网上找的 -->
<link
	href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css"
	rel="stylesheet">

</head>
<body id="skin-blur-violate">

	<header id="header" class="media">
		<a href="" id="menu-toggle"></a> <a class="logo pull-left"
			href="toIndex">车辆缉查管理</a>

		<div class="media-body">
			<div class="media" id="top-menu">



				<div id="time" class="pull-right">
					<span id="hours"></span> : <span id="min"></span> : <span id="sec"></span>
				</div>

			</div>
		</div>
	</header>

	<div class="clearfix"></div>

	<section id="main" class="p-relative" role="main">

		<!-- Sidebar -->
		<aside id="sidebar">
			<!-- Sidbar Widgets -->
			<div class="side-widgets overflow">
				<!-- Profile Menu -->
				<div class="text-center s-widget m-b-25 dropdown" id="profile-menu">
					<a href="" data-toggle="dropdown"> <img
						class="profile-pic animated" src="zhu/img/profile-pic.jpg" alt="">
					</a>
					<ul class="dropdown-menu profile-menu">
						<li><a href="logout">注销用户</a> <i class="icon left">&#61903;</i><i
							class="icon right">&#61815;</i></li>
					</ul>
					<h4 class="m-0"><%=user.getUserName()%></h4>
				</div>
				<!-- Calendar -->
				<div class="s-widget m-b-25">
					<div id="sidebar-calendar"></div>
				</div>
				<!-- Projects -->
				<div class="s-widget-body"></div>
			</div>

			<!-- Side Menu -->
			<ul class="list-unstyled side-menu">
				<li class="active"><a class="sa-side-home" href="toIndex">
						<span class="menu-item">主页</span>
				</a></li>
				<%
					if (!type1.isEmpty()) {
				%>

				<li class="dropdown"><a class="sa-side-ui" href=""> <span
						class="menu-item">卡口系统</span>
				</a>
					<ul class="list-unstyled menu-item">
						<%
							for (Right right : type1) {
						%>
						<li><a href="<%=right.getHref()%>" onclick="loading()"><%=right.getRightName()%></a></li>
						<%
							}
						%>
					</ul></li>
				<li>
					<%
						}
						if (!type2.isEmpty()) {
					%>
				
				<li class="dropdown"><a class="sa-side-widget" href=""> <span
						class="menu-item">车辆缉查</span>
				</a>
					<ul class="list-unstyled menu-item">
						<%
							for (Right right : type2) {
						%>
						<li><a href="<%=right.getHref()%>" onclick="loading()"><%=right.getRightName()%></a></li>
						<%
							}
						%>
					</ul></li>
				<li>
					<%
						}
						if (!type3.isEmpty()) {
					%>
				
				<li class="dropdown"><a class="sa-side-form" href=""> <span
						class="menu-item">资源管理</span>
				</a>
					<ul class="list-unstyled menu-item">
						<%
							for (Right right : type3) {
						%>
						<li><a href="<%=right.getHref()%>" onclick="loading()"><%=right.getRightName()%></a></li>
						<%
							}
						%>
					</ul></li>
				<%
					}
					if (!type4.isEmpty()) {
				%>
				<li class="dropdown"><a class="sa-side-ui" href=""> <span
						class="menu-item">系统管理</span>
				</a>
					<ul class="list-unstyled menu-item">
						<%
							for (Right right : type4) {
						%>
						<li><a href="<%=right.getHref()%>" onclick="loading()"><%=right.getRightName()%></a></li>
						<%
							}
						%>
					</ul> <%
 	}
 %></li>
			</ul>
		</aside>

		<!-- Content -->
		<section id="content" class="container">
			<!-- Breadcrumb -->
			<ol class="breadcrumb hidden-xs">

				<li class="active"><a href="toIndex">主页</a></li>
				<li><a href="logout">注销用户</a></li>
			</ol>

			<h4 class="page-title">角色管理</h4>

			<div class="tile">
				<h2 class="tile-title">信息查询</h2>

				<form class="form-inline" role="form">
					<label class="form-label">用户名</label> <input type="text"
						name="userName"
						class="form-control contact_input_box wow fadeInUp" id="userName">
					<label class="form-label">角色</label> <select id="sex" name="sex"
						class="selectpicker show-tick form-control"
						data-live-search="false">
						<option value="0">默认角色</option>
						<option value="1">警官</option>
						<option value="2">管理员</option>
					</select>
					<button type="button"
						class="btn btn-primary contact_button wow fadeInUp"
						onclick='query()'>
						<i class="fa fa-send-o"></i> 查询
					</button>
					<button class="btn btn-primary contact_button wow fadeInUp">
						<a href="toIndex"><i class="fa fa-send-o"></i> 返回</a>
					</button>

				</form>


			</div>
			<!-- Table Hover -->
			<div class="block-area" id="tableHover">

				<div class="table-responsive overflow">
					<form class="form-inline" role="form">
						<h2 class="tile-title">
							<a id="btn0"></a> 当前
							<%=pageModel.getCurrentPage()%>/
							<%=pageModel.getTotalPage()%>页 每页<input id="pageSize" type="text"
								size="1" maxlength="2" value="<%=pageModel.getEveryPage()%>"
								class="form-control contact_input_box wow fadeInUp"
								style="width: 50px;" /> 条 <a href="#" id="pageSizeSet">设置</a> <a
								id="sjzl">数据总量 <%=pageModel.getTotalCount()%></a> <a href="#"
								id="btn1">首页</a> <a href="#" id="btn2">上一页</a> <a href="#"
								id="btn3">下一页</a> <a href="#" id="btn4">尾页</a> <a>转到 </a> <input
								id="changePage" type="text" size="1" maxlength="4"
								class="form-control contact_input_box wow fadeInUp"
								style="width: 50px;" /> <a>页 </a> <a href="#" id="btn5">跳转</a>
						</h2>
					</form>
					<table data-toggle="table"
						class="table table-bordered table-hover tile"
						data-pagination="true" //是否支持分页 data-show-search="true"
						//是否显示搜索框功能 data-show-columns="true" //显示columns功能按钮
						data-icon-size="outline" data-mobile-responsive="true"
						data-height="100%" id="tablelist" data-side-pagination="server"
						//支持服务器端分页，默认是client>


						<thead>
							<tr>
								<th>用户名</th>
								<th id="role">角色</th>
								<th data-formatter="actionFormatter" data-events="actionEvents">权限信息</th>
							</tr>
						</thead>
						<tbody>
							<%
								for (User staff : queryStaffByPage) {
							%>
							<tr>

								<td><%=staff.getUserName()%></td>
								<%
									if (staff.getRole().getRoleId() == 2) {
								%>
								<td>警官</td>
								<%
									} else if (staff.getRole().getRoleId() == 1) {
								%>
								<td>警员</td>
								<%
									} else if (staff.getRole().getRoleId() == 3) {
								%>
								<td>管理员</td>
								<%
									}
								%>
								<td>==</td>
							</tr>
							<%
								}
							%>
						</tbody>
					</table>
				</div>
			</div>


			<!-- dialog -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-body">

							<h4 id='titleName'>用户名</h4>
							<p>
								<input type="checkbox" id='0' value="过车信息查询" DISABLED />过车信息查询
							</p>
							<p>
								<input type="checkbox" id='1' value="过车历史查询" DISABLED />过车历史查询
							</p>
							<p>
								<input type="checkbox" id='2' value="过车实时监控" DISABLED />过车实时监控
							</p>
							<p>
								<input type="checkbox" id='3' value="车辆轨迹回放" DISABLED />车辆轨迹回放
							</p>
							<p>
								<input type="checkbox" id='4' value="车辆布控申请" DISABLED />车辆布控申请
							</p>
							<p>
								<input type="checkbox" id='5' value="车辆布控审核" DISABLED />车辆布控审核
							</p>
							<p>
								<input type="checkbox" id='6' value="车辆布控管理" DISABLED />车辆布控管理
							</p>
							<p>
								<input type="checkbox" id='7' value="缉查报警处理" DISABLED />缉查报警处理
							</p>
							<p>
								<input type="checkbox" id='8' value="报警查询" DISABLED />报警查询
							</p>
							<p>
								<input type="checkbox" id='9' value="点位查看" DISABLED />点位查看
							</p>
							<p>
								<input type="checkbox" id='10' value="点位管理" DISABLED />点位管理
							</p>
							<p>
								<input type="checkbox" id='11' value="人员信息查看" DISABLED />人员信息查看
							</p>
							<p>
								<input type="checkbox" id='12' value="个人信息查看" DISABLED />个人信息查看
							</p>
							<p>
								<input type="checkbox" id='13' value="日志管理" DISABLED />日志管理
							</p>
							<p>
								<input type="checkbox" id='14' value="角色管理" DISABLED />角色管理
							</p>
						</div>
						<div class="modal-footer">
							<div style="float: left; width: 100px">
								<button type="button" id='15' class="btn btn-default"
									data-dismiss="modal">
									<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
								</button>
							</div>
							<div style="float: left; width: 100px">
								<button type="button" id='16' class="btn btn-default"
									onclick='save()'>
									<span class="glyphicon glyphicon-floppy-disk"
										aria-hidden="true"></span>保存
								</button>
							</div>
						</div>

						<!-- Javascript Libraries -->
						<!-- jQuery -->
						<script src="zhu/js/jquery.min.js"></script>
						<!-- jQuery Library -->
						<script src="zhu/js/jquery-ui.min.js"></script>
						<script src="js/layer.js"></script>
						<!-- jQuery UI -->
						<script src="zhu/js/jquery.easing.1.3.js"></script>
						<!-- jQuery Easing - Requirred for Lightbox + Pie Charts-->

						<!-- Bootstrap -->
						<script src="zhu/js/bootstrap.min.js"></script>

						<!-- Charts -->
						<script src="zhu/js/charts/jquery.flot.js"></script>
						<!-- Flot Main -->
						<script src="zhu/js/charts/jquery.flot.time.js"></script>
						<!-- Flot sub -->
						<script src="zhu/js/charts/jquery.flot.animator.min.js"></script>
						<!-- Flot sub -->
						<script src="zhu/js/charts/jquery.flot.resize.min.js"></script>
						<!-- Flot sub - for repaint when resizing the screen -->

						<script src="zhu/js/sparkline.min.js"></script>
						<!-- Sparkline - Tiny charts -->
						<script src="zhu/js/easypiechart.js"></script>
						<!-- EasyPieChart - Animated Pie Charts -->
						<script src="zhu/js/charts.js"></script>
						<!-- All the above chart related functions -->

						<!-- Map -->
						<script src="zhu/js/maps/jvectormap.min.js"></script>
						<!-- jVectorMap main library -->
						<script src="zhu/js/maps/usa.js"></script>
						<!-- USA Map for jVectorMap -->

						<!--  Form Related -->
						<script src="zhu/js/icheck.js"></script>
						<!-- Custom Checkbox + Radio -->

						<!-- UX -->
						<script src="zhu/js/scroll.min.js"></script>
						<!-- Custom Scrollbar -->

						<!-- Other -->
						<script src="zhu/js/calendar.min.js"></script>
						<!-- Calendar -->
						<script src="zhu/js/feeds.min.js"></script>
						<!-- News Feeds -->


						<!-- All JS functions -->
						<script src="zhu/js/functions.js"></script>

						<!--我自己网上找的js-->
						<script
							src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.js"></script>
						<script src="zhu/js/bootstrap-table.js"></script>
						<script
							src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.js"></script>

						<script type="text/javascript">
function actionFormatter(value, row, index) {
        return '<a class="detail" >详细信息</a> '+'<a class="edit" >修改</a> ';
    }

    //表格  - 操作 - 事件
    window.actionEvents = {
        'click .detail': function(e, value, row, index) {   
            //alert(index);//  index就是第几行
            
			var tableId = document.getElementById("tablelist");
			var userNameOfInformation = tableId.rows[index+1].cells[0].innerHTML;
			$("#titleName").text(userNameOfInformation);
            $.ajax({
        		url : "roleManagerInformation",
        		type : "post",
        		data : {
        			userNameOfInformation : userNameOfInformation,
        		},
        		success: function(returnedData){
        	        alert(returnedData);
        		}
        	});
            
            $('#myModal').modal();
            $('#myModal').on('shown.bs.modal', function () {

        	document.getElementById("0").disabled=true;
        	document.getElementById("1").disabled=true;
        	document.getElementById("2").disabled=true;
        	document.getElementById("3").disabled=true;
        	document.getElementById("4").disabled=true;
        	document.getElementById("5").disabled=true;
        	document.getElementById("6").disabled=true;
        	document.getElementById("7").disabled=true;
        	document.getElementById("8").disabled=true;
        	document.getElementById("9").disabled=true;
        	document.getElementById("10").disabled=true;
        	document.getElementById("11").disabled=true;
        	document.getElementById("12").disabled=true;
        	document.getElementById("13").disabled=true;
        	document.getElementById("14").disabled=true;
        	//document.getElementById("15").style.display = "none";
        	document.getElementById("16").style.display = "none";
 })
            },
        'click .edit': function(e, value, row, index) {   
            
        $('#myModal').modal();
        $('#myModal').on('shown.bs.modal', function () {  	
        	
        	var tableId = document.getElementById("tablelist");
			var userRoleUpdate = tableId.rows[index+1].cells[0].innerHTML;
			$("#titleName").text(userRoleUpdate);
			
        	$.ajax({
        		url : "roleManagerEdit",
        		type : "post",
        		data : {
        			userRoleUpdate : userRoleUpdate,
        		},
        		success: function(returnedData){
        	        alert(returnedData);
        		}
        	});
        	document.getElementById("0").disabled=false;
        	document.getElementById("1").disabled=false;
        	document.getElementById("2").disabled=false;
        	document.getElementById("3").disabled=false;
        	document.getElementById("4").disabled=false;
        	document.getElementById("5").disabled=false;
        	document.getElementById("6").disabled=false;
        	document.getElementById("7").disabled=false;
        	document.getElementById("8").disabled=false;
        	document.getElementById("9").disabled=false;
        	document.getElementById("10").disabled=false;
        	document.getElementById("11").disabled=false;
        	document.getElementById("12").disabled=false;
        	document.getElementById("13").disabled=false;
        	document.getElementById("14").disabled=false;
        	//document.getElementById("15").style.display = "block";
        	document.getElementById("16").style.display = "block";
        	})
        }
        }


function save() {
    var nameUpdate = document.getElementById("titleName");
    var check0 = document.getElementById("0").checked;	
    var check1 = document.getElementById("1").checked;
    var check2 = document.getElementById("2").checked;
    var check3 = document.getElementById("3").checked;
    var check4 = document.getElementById("4").checked;
    var check5 = document.getElementById("5").checked;
    var check6 = document.getElementById("6").checked;
    var check7 = document.getElementById("7").checked;
    var check8 = document.getElementById("8").checked;
    var check9 = document.getElementById("9").checked;
    var check10 = document.getElementById("10").checked;
    var check11 = document.getElementById("11").checked;
    var check12 = document.getElementById("12").checked;
    var check13 = document.getElementById("13").checked;
    var check14 = document.getElementById("14").checked;
    $.ajax({
		url : "roleManagerEditSave",
		type : "post",
		data : {
			nameUpdate : nameUpdate.innerText,
			check0 : check0,
			check1 : check1,
			check2 : check2,
			check3 : check3,
			check4 : check4,
			check5 : check5,
			check6 : check6,
			check7 : check7,
			check8 : check8,
			check9 : check9,
			check10 : check10,
			check11 : check11,
			check12 : check12,
			check13 : check13,
			check14 : check14,
		},
		success: function(returnedData){
	        alert(returnedData.result);
		}
	});
};
function query() {
	var name = document.getElementById("userName");
	var role = document.getElementById("role");
	var chk=document.getElementById("check");//用来获取模糊查询的选中状态    通过chk.checked是true还是false
	$.ajax({
		url : "roleManagerSearch",
		type : "post",
		data : {
			userName : name.value,
			role : role.value,
			chk : chk.checked
		},
		success: function(returnedData){
	        alert(returnedData);
		}
	});
};

</script>



						<script type="text/javascript">
             var curPage=0;        //当前页
             var lastPage;        //最后页
             var direct=0;        //方向
            var len;            //总行数
            var page;            //总页数
            var begin;
            var end;

                
            $(document).ready(function display(){   
                $("#btn1").click(function firstPage(){    // 首页
                    curPage=1;
                    direct = 0;
                    displayPage();
                });
                $("#btn2").click(function frontPage(){    // 上一页
                    direct=-1;
                    displayPage();
                });
                $("#btn3").click(function nextPage(){    // 下一页
                    direct=1;
                    displayPage();
                });
                $("#btn4").click(function lastPage(){    // 尾页
                    curPage=page;
                    direct = 0;
                    displayPage();
                });
                $("#btn5").click(function changePage(){    // 转页
                    curPage=document.getElementById("changePage").value * 1;
                    if (!/^[1-9]\d*$/.test(curPage)) {
                        alert("请输入正整数");
                        return ;
                    }
                    if (curPage > page) {
                        alert("超出数据页面");
                        return ;
                    }
                    direct = 0;
                    displayPage();
                });

                
                $("#pageSizeSet").click(function setPageSize(){    // 设置每页显示多少条记录
                    pageSize = document.getElementById("pageSize").value;    //每页显示的记录条数
                    if (!/^[1-9]\d*$/.test(pageSize)) {
                        alert("请输入正整数");
                        return ;
                    }
                    len =$("#mytable tr").length - 1;
                    page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数
                    curPage=1;        //当前页
                     direct=0;        //方向
                     firstPage();
                });
            });

            function displayPage(){
                if(curPage <=1 && direct==-1){
                    direct=0;
                    alert("已经是第一页了");
                    return;
                } else if (curPage >= page && direct==1) {
                    direct=0;
                    alert("已经是最后一页了");
                    return ;
                }

                lastPage = curPage;

                // 修复当len=1时，curPage计算得0的bug
                if (len > pageSize) {
                    curPage = ((curPage + direct + len) % len);
                } else {
                    curPage = 1;
                }

                
                document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页    每页 ";        // 显示当前多少页

                begin=(curPage-1)*pageSize + 1;// 起始记录号
                end = begin + 1*pageSize - 1;    // 末尾记录号

                
                if(end > len ) end=len;
                $("#mytable tr").hide();    // 首先，设置这行为隐藏
                $("#mytable tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
                    if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
                        $(this).show();
                });
             }
            
            function loading() {
    			var index = layer.load(1, {
    				shade : [ 0.1, '#fff' ]
    			//0.1透明度的白色背景
    			});
    			layer.msg('页面正在加载中,请稍后');
    		}
</script>
</body>
</html>
